<script setup lang="ts">
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
import { ElIcon, ElScrollbar, ElRow, ElCol } from "element-plus";

const props = defineProps({
    value: {
        type: Object,
    }
});

const emits = defineEmits(["selected"]);

const iconSelected = (key: string, icon: any) => {
    emits("selected", key, icon);
}
</script>

<template>
    <ElScrollbar :height="200">
        <ElRow>
            <ElCol class="cursor-pointer flex" :span="8" v-for="[k, comp] of Object.entries(ElementPlusIconsVue)" :key="k"
                @click="iconSelected(k, comp)">
                <ElIcon :size="20">
                    <component :is="comp"></component>
                </ElIcon>
                <span>{{ k }}</span>
            </ElCol>
        </ElRow>
    </ElScrollbar>
</template>

<style lang="scss" scoped></style>